<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红包雨</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 500px;
        }

        @keyframes move {
            0% {
                top: 0;
                opacity: 0;
            }

            2% {
                top: 0;
                opacity: 1;
            }

            80% {
                top: 400px;
                opacity: 0.6;
            }


            100% {
                top: 500px;
                opacity: 0;
            }
        }

        img {
            display: block;
            width: 150px;
            height: 150px;
            position: absolute;
            animation-name: move;
            animation-duration: 3s;
            background-color: red;
        }

        .this {
            box-sizing: border-box
        }

        .stop {
            animation-play-state: paused;
            z-index: 99999999;
        }

        .goon {
            animation-play-state: running;
        }
    </style>
</head>

<body>
    <script>
        let flag = true
        const body = document.querySelector('body')
        setInterval(function () {
            const i = Math.floor(Math.random() * 10000)
            const num = Math.floor(Math.random() * 4);
            const num1 = Math.floor(Math.random() * 1500);
            const dollor = document.createElement('img');
            // dollor.setAttribute('src', `./dollar/dollor${num}.png`);
            dollor.setAttribute('style', `left: ${num1}px;`)
            dollor.setAttribute('data-id', i)
            body.appendChild(dollor);
            if (flag) {
                dollor.addEventListener('mouseenter', function () {
                    this.className = 'stop';
                    clearTimeout(timer);
                    flag = false;
                })
            }
            let timer = setTimeout(function () {
                body.removeChild(dollor)
            }, 3000);
        }, 400)
        body.addEventListener('mouseout', function (e) {
            if (!(this == e.target)) {
                e.target.className = 'goon'
                flag = true;

                setTimeout(() => {
                    body.removeChild(e.target)
                }, 500);
            }
        })

    </script>
</body>

</html>